<script setup lang="ts">
import Table from "@/components/table/index.vue";
import { TableColumn } from "@/components/table/type";
import { onMounted, ref } from "vue";
import { useTasksStoreWithOut } from "@/store/modules/tasks";
import TitelBar from "@/components/titelBar/index.vue";
import Drawer from "./drawer.vue";
import type { tasksFace } from "@/types/tasks"
const props = defineProps({
    ischildren: {
        type: Boolean,
        default: false,
        required: false
    }
})
const emit = defineEmits(["clickDAta",]);
const store = useTasksStoreWithOut();
const column = ref<TableColumn[]>([
    {
        label: "任务编号",
        prop: "taskType",
    },
    {
        label: "任务名称",
        prop: "taskName",
    },
    {
        label: "是否开启",
        prop: "_slot:taskStatus",
    },
    {
        label: "是否默认全局加载",
        prop: "_slot:defaultLoading",
    },
    {
        label: "更新时间",
        prop: "updateTime",
    },
    {
        label: "操作",
        prop: "_slot:operation",
    },
]);
const query = ref({
    keyword: ''
})
const btns = ref([{ key: "add", name: '新增' }])
// const actions = ref([{ key: "remove", name: '删除' }])
const actions = ref([])
const nowData = ref<tasksFace>()
const show = ref(false)
const ids = ref<Array<string>>([])
const handelchangeSize = (e: any) => {
    store.setPageSize(e);
};
const handekcurrentChange = (e: any) => {
    store.setPage(e);
};
const handelmodiu = (row: tasksFace) => {
    nowData.value = row
    show.value = true
};
const handelremove = (row: tasksFace) => {
    store.remove(row.id)
};
const changeValue = (e) => {
    if (!e) return
    query.value.keyword = e
    store.setQuerys(query.value)
}
const refresh = () => {
    store.refresh();
    store.LoadList();
}
const btnEvent = (key) => {
    switch (key) {
        case 'add':
            addItem()
            break;
        case 'remove':
            // remove()
            break;

        default:
            break;
    }
}
const addItem = () => {
    nowData.value = null
    show.value = true
}
const close = () => {
    show.value = false
    nowData.value = null
}
const submit = (e: tasksFace) => {
    store.addOrupDate(e)
}
const checkDAta = (e: tasksFace) => {
    emit('clickDAta', e)
}
onMounted(() => {
    store.LoadList();
});
</script>
<template>
    <div style="height: 100%;">
        <TitelBar :buttons="btns" :actions="actions" @changeValue="changeValue" @refresh="refresh" @btnEvent="btnEvent">
        </TitelBar>
        <Table :data="store.getList" :column="column" :page="store.getPage" :pageSize="store.pageSize" :total="store.total"
            v-loading="store.getLoding" height="calc(100vh - 220px)" @sizeChange="handelchangeSize"
            @currentChange="handekcurrentChange">
            <template #defaultLoading="{ scope }">
                <el-text class="mx-1" type="danger" v-if="scope.defaultLoading == 0">手动加载</el-text>
                <el-text class="mx-1" type="primary" v-if="scope.defaultLoading == 1">默认全局加载</el-text>
            </template>
            <template #taskStatus="{ scope }">
                <el-text class="mx-1" type="danger" v-if="scope.taskStatus == 0">关闭中</el-text>
                <el-text class="mx-1" type="primary" v-if="scope.taskStatus == 1">使用中</el-text>
            </template>
            <template #operation="{ scope }">
                <el-button v-if="props.ischildren" type="primary" link @click="checkDAta(scope)">选择</el-button>
                <el-button v-if="!props.ischildren" type="primary" link @click="handelmodiu(scope)">编辑</el-button>
                <el-popconfirm v-if="!props.ischildren" width="300px" title="确定要删除吗?删除后将无法恢复！"
                    @confirm="handelremove(scope)">
                    <template #reference>
                        <el-button type="danger" link>删除</el-button>
                    </template>
                </el-popconfirm>

            </template>
        </Table>
    </div>
    <Drawer :groupData="nowData" :show="show" @close="close" @submit="submit"></Drawer>
</template>

<style scoped lang="scss"></style>
